<template>
    <div class="container">
        <div class="container MuiPaper-elevation2-346 MuiPaper-rounded-343 ">
            <div class="handle-box">
                <div class="EnhancedTableToolbar-title-373">
                    <div>通道
                        <el-button class="mr10" type="primary" @click="actionDialogVis=true">
                            <el-icon>
                                <Plus />
                            </el-icon>添加通道
                        </el-button>
                    </div>
                </div>
            </div>
            <el-table :data="tableData" border class="table" header-cell-class-name="table-header">
                <el-table-column prop="name" label="通道名称(ID)"></el-table-column>
                <el-table-column prop="league" label="联盟" width="200"></el-table-column>
                <el-table-column prop="order" label="Order节点"></el-table-column>
                <el-table-column align="centr" label="是否启用">
                    <template #default="scope">
                        <el-tag :type="
                            scope.row.status === '已启动'
                                ? 'success'
                                : scope.row.status === '未启动'
                                    ? 'danger'
                                    : ''
                        ">{{ scope.row.status }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="desc" label="通道描述"></el-table-column>
                <el-table-column label="操作" width="300" align="center">
                    <template #default="scope">
                        <el-button v-if="scope.row.status=='未启动'" type="primary" key="primary"
                            @click="deleteItem(scope.$index)">删除</el-button>
                        <el-button type="primary" key="primary" @click="infoDialog(scope.$index)">详情</el-button>
                        <el-button v-if="scope.row.status=='未启动'" type="primary" key="primary"
                            @click="runChannel(scope.$index)">启用通道</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog title="添加通道" v-model="actionDialogVis" width="40%">
            <el-form ref="formRef" :model="form" label-width="120px">
                <el-form-item label="通道名称(ID)*" prop="name">
                    <el-input v-model="form.name" />
                </el-form-item>
                <el-form-item label="通道描述" prop="desc">
                    <el-input v-model="form.desc" />
                </el-form-item>
                <el-form-item label="联盟*" prop="league">
                    <el-select v-model="form.league">
                        <el-option v-for="item in leagueList" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="Order节点*" prop="order">
                    <el-select v-model="form.order">
                        <el-option v-for="item in ordererList" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="handleAdd">添 加</el-button>
                </span>
            </template>
        </el-dialog>
        <el-dialog v-model="infoDialogVisible" width="40%">
            <el-descriptions title="查看通道" direction="horizontal" column="1" border>
                <el-descriptions-item label="通道名称(ID)*">{{ form.name }}</el-descriptions-item>
                <el-descriptions-item label="通道描述">{{ form.desc }}</el-descriptions-item>
                <el-descriptions-item label="联盟*">{{ form.league }}</el-descriptions-item>
                <el-descriptions-item label="Order节点*">{{ form.order }}</el-descriptions-item>
            </el-descriptions>
        </el-dialog>
    </div>
</template>
  
<script lang="ts" setup>
import { ref, onMounted, reactive } from "vue";
import { ElMessage } from "element-plus";
import axios from "axios";

const tableData = ref([]) as any;
const leagueList = ref([]) as any;
const ordererList = ref([]) as any;

onMounted(() => {
    loadData();
    loadLeague();
    loadOrder();
})

// 加载表格数据
const data = reactive([]) as any;
const loadData = () => {
    tableData.value = [];
    axios.get('prefix/api/entity/channels', {
    }).then(function (response) {
        console.log("loadData:");
        console.log(response.data);
        data.value = response.data.channels;
        for (let i = 0; i < data.value.length; i++) {
            tableData.value.push({
                name: data.value[i].Name,
                order: data.value[i].OrdererName,
                status: data.value[i].State == 'enable' ? '已启动' : '未启动',
                desc: data.value[i].Desc,
                league: data.value[i].Consortium
            })
        }
    })
}

const loadLeague = () => {
    leagueList.value = [];
    axios.get('/prefix/api/entity/consortiums').then(function (response) {
        const list = response.data.consortiums;
        for (let i = 0; i < list.length; i++) {
            leagueList.value.push({
                label: list[i].Name,
                value: list[i].Name
            })
        }
    })
}

const loadOrder = () => {
    ordererList.value = [];
    axios.get('/prefix/api/entity/orderers').then(function (response) {
        const list = response.data.orderers;
        for (let i = 0; i < list.length; i++) {
            ordererList.value.push({
                label: list[i].Name,
                value: list[i].Name
            })
        }
    })
}

// 初始化表格
const actionDialogVis = ref(false);
const form = reactive({
    name: "",
    desc: "",
    order: "",
    league: ""
})
const handleAdd = () => {
    axios.post('/prefix/api/entity/channels/' + form.name, {
        Name: form.name,
        Desc: form.desc,
        Consortium: form.league,
        OrdererName: form.order
    }).then(function (value) {
        console.log(value);
        ElMessage.success("添加成功");
        actionDialogVis.value = false;
        loadData();
    }).catch(function (reason) {
        console.log(reason);
        ElMessage.error("添加失败");
    })
}

// 删除节点
const deleteItem = (index) => {
    axios.delete('prefix/api/entity/channels/' + tableData.value[index].name, {
    }).then(function (response) {
        // console.log(response)
        ElMessage.success("删除成功");
        loadData();
    }).catch(function (error) {
        console.log(error);
    })
}

// 查看节点
const infoDialogVisible = ref(false);
const infoDialog = (index) => {
    infoDialogVisible.value = true;
    axios.get('prefix/api/entity/channels/' + tableData.value[index].name, {
    }).then(function (response) {
        // console.log(response.data)
        form.name = response.data.Name,
            form.desc = response.data.Desc,
            form.league = response.data.Consortium,
            form.order = response.data.OrdererName
    })
}

// 启动节点
const runChannel = (index) => {
    axios.put('prefix/api/entity/channels/' + tableData.value[index].name + '/cmd', {
        "Cmd": "CHANNEL_CREATE",
        "NodeName": tableData.value[index].name
    }).then(function (response) {
        console.log(response)
        if (response.data.msg == 'disable') {
            ElMessage.error("启动失败")
        } else {
            ElMessage.success("启动成功");
        }
        loadData();
    }).catch(function (error) {
        console.log(error);
    })
}
</script>
  
<style scoped>
.table {
    width: 100%;
    font-size: 14px;
}

.container {
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
}

.mr10 {
    margin-right: 10px;
}

.EnhancedTableToolbar-title-373 {
    flex: 0 0 auto;
}

.handle-box {
    margin-bottom: 20px;
}

.MspTable-root-444 {
    margin-top: 24px;
}

.MuiPaper-elevation2-346 {
    box-shadow: 0px 1px 5px 0px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 3px 1px -2px rgb(0 0 0 / 12%);
}

.MuiPaper-rounded-343 {
    border-radius: 4px;
}
</style>
  